<template>
    <!-- solutionIdeaiQMonozukuri -->
    <div class="solutionIdea">
        <!-- 头部 -->
        <InsideHeader :bannerType="bannerType"></InsideHeader>
        <!-- 面包屑 -->
        <!-- <crumb></crumb> -->
        <div class="crumb">
            <div class="block">  
                <div class="crumbL">
                    <nuxt-link :to="{name: 'index'}">首页</nuxt-link>
                    <em>></em>
                    <nuxt-link :to="{name: 'solution-solutionIndex'}" >解决方案</nuxt-link>
                    <em>></em>
                    <a href="#">产品解决方案</a>
                    <em>></em>
                    <nuxt-link :to="{name: 'solution-solutionIdeaiQMonozukuri'}" class="on">iQ Monozukuri</nuxt-link>
                    <div class="clear"></div>
                </div>
                <!-- <div class="crumbR">
                    <nuxt-link :to="{name: 'solution-solutionDetails'}">e-F@ctory </nuxt-link>
                    <nuxt-link :to="{name: 'solution-ctory'}">e-F@ctory Alliance</nuxt-link>
                    <a href="#">产品解决方案</a>
                    <nuxt-link :to="{name: 'solution-industryScheme'}">行业解决方案</nuxt-link>
                    <a href="#">课题解决方案</a>
                    <nuxt-link :to="{name: 'solution-solutionLead'}">导入事例</nuxt-link>
                    <div class="clear"></div>
                </div> -->
                <div class="clear"></div>
            </div>
        </div>

        <div class="block">
            <div class="content">
                <div class="title">
                    <span>iQ Monozukuri</span>
                </div>
                <div class="tab">
                    <ul>
                        <li @click="tabStyle(0)" :class="[{tabS:id==0}]"><span>理念</span></li>
                        <li @click="tabStyle(1)" :class="[{tabS:id==1}]"><span>拧螺丝作业支援</span></li>
                        <li @click="tabStyle(2)" :class="[{tabS:id==2}]"><span>取料防错</span></li>
                        <div class="clear"></div>
                    </ul>
                </div>
                <!-- 理念 -->
                <div v-show="id===0" class="solutionIdeaCar1">
                    <img src="../../static/images/solutionIdeaiQMonozukuri1.png">
                </div>
                <!-- 拧螺丝作业支援 -->
                <div v-show="id===1" class="solutionIdeaCar1">
                    <img src="../../static/images/solutionIdeaiQMonozukuri2.png">
                </div>
                <!-- 取料防错 -->
                <div v-show="id===2" class="solutionIdeaCar1">
                    <img src="../../static/images/solutionIdeaiQMonozukuri3.png">
                </div>
            </div>
        </div>


        <!-- 链接 -->
        <Insidelink></Insidelink>

        <!-- 底部 -->
        <HomeHooter></HomeHooter>
    </div>
</template>

<script>
    import $ from "jquery";
    import "@/assets/css/news.css";
    import InsideHeader from "@/components/head";
    import HomeHooter from "@/components/footer";
    import crumb from "@/components/crumb";
    import Insidelink from "@/components/link";
    export default {
        name: "solutionIdeaiQMonozukuri",
        components: {
            InsideHeader,
            HomeHooter,
            crumb,
            Insidelink,
        },
        data(){
            return{
                tabInsideid:0,
                bannerType:'solution',
                id:0,
                    list:[
                        "迅速应对需求变化，提高运转率，缩短开发周期，提高质量，削减成本…要解决制造业存在的课题，关键在于如何对生产现场进行信息化，并充" +
                        "分利用只写数据。FA-IT信息协同产品系列是来源于e-F@ctory的划时代产品",
                        "将生产设备，MES（制造执行系统）乃至上层信息系统直接连到一起"
                    ],
                tabInside:[
                    '产品结构 ',
                    ' MELSEC iQ-R/MELSEC Q MES接口',
                    '显示器GOT2000 MES接口',
                    'MELQIC MES接口',
                    '数值控制装置 M800/M80系列 MES接口',
                    'C语言控制器',
                ],
                tabInside1:[
                    '控制器&HMI',
                    '网络',
                    '工程环境',
                ],

            }

        },
        methods:{
            tabStyle(index){
                this.id=index
            },
            tabInsideF(index){
                this.tabInsideid=index
                var elemId="#info"+index
                const anchorEle = document.querySelector(elemId);
                if (!!anchorEle ) {
                  anchorEle .scrollIntoView(true);
                }
            }
        }
    }
</script>

<style scoped>
.lineup02{
    font-size: 90%;
    font-weight: bold;
    margin: 30px 0 0 0;
  padding: 0 0 5px 0px;
    border-bottom: solid 1px #ccc;
}
.lineup02 span {
    padding: 5px 0 3px 10px;
    display: block;
    word-wrap: break-word;
     border-left: solid 3px #ee4e5b
}
</style>
